<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.4.1.min (1).js"></script>
    <style>
        body{
            background-color: antiquewhite;
        }
        h1{
            margin-top: 40px;
            margin-left: 164px;
            font-size: 60px;
        }
        #one{
            width: 650px;
            height: 600px;
            border: double 50px white;
            margin-top: 150px;
            margin-left: 430px;
            
        }
        #two{
            width: 400px;
            height: 30px;
            border: solid 2px black;
            margin-top: 25px;
            margin-left: -35px;
            font-size: 25px;
            font-family: cursive;
        }
        span{
            font-size: 30px;
            display: inline-block;/* 让元素变成行内块级元素才可改变外边距等*/
            margin-top: 40px;
            margin-left: 10px;
        }
      #three{
       width: 100px;
        height: 25px;
        margin-left: 30px;
        font-size: 16px;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        background-color: grey;
        padding-left: -2px;
        line-height: 13px;
        text-align: center;
        border-radius: 5px 5px 5px 5px;
        color: aliceblue;
    }
    #six{
        width: 100px;
        height: 25px;
        margin-left: 10px;
        font-size: 16px;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        background-color: grey; 
        padding-left: 7px;
        line-height: 13px;
        text-align: center;
        border-radius: 5px 5px 5px 5px;
        color: aliceblue;
    }
    #seven{
        width: 100px;
        height: 25px;
        margin-left: 10px;
        font-size: 16px;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        background-color: grey;
        padding-left: 7px;
        line-height: 13px;
        text-align: center;
        border-radius: 5px 5px 5px 5px;
        color: aliceblue;
    }
   #four{
    width: 220px;
    height: 35px;
    font-size: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 10px;
    text-align: center;
    margin-left: 30px;
   }
   #four1{
    width: 220px;
    height: 35px;
    font-size: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 10px;
    text-align: center;
    margin-left: 30px;
   }
   #five{
    width: 220px;
    height: 35px;
    font-size: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 10px;
    text-align: center;
    margin-left: 30px;
   }
    </style>
    
</head>
<body>
    <div id="one">
        <h1>某人的艺术字</h1>
      <span id="four">请输入名字：</span> <input id="two" type="text"><br>
      <span id="five"> 请选择样式：</span> <input id="three" type="button" value="加粗">
        <input id="seven" type="button" value="斜体">
        <input id="six" type="button" value="下划线">
        <div id="four1">你的名字:&nbsp;&nbsp;<span id="num">无</span></div>

    </div>
</body>
<script>
    $(document).ready(function(){
        $("[value='加粗']").click(function(){
            let str=$(":text").val();//获取的是输入文本框的内容
            $("#num").html("<b>"+str+"</b>");//将其添加到span中
        })
        $("[value='斜体']").click(function(){
            let str=$(":text").val();
            $("#num").html("<i>"+str+"</i>")
        })
        $("[value='下划线']").click(function(){
            let str=$(":text").val();
            $("#num").html("<u>"+str+"</u>")
        })
        $(":button").click(function(){
            $("h1").text($(":text").val()+"的艺术字")
        })
    })
</script>
</html>